<template>
    <div class="QilinVueEditify">
        <Editify
            ref="editifyRef"
            v-model="ownEditifyConfig.value"
            :placeholder="ownEditifyConfig.placeholder || '请输入内容......' "
            :autofocus="ownEditifyConfig.autofocus || false "
            :disabled="ownEditifyConfig.disabled || false "
            :border="ownEditifyConfig.border ?? true"
            :autoheight="ownEditifyConfig.autoheight || false "
            :show-word-length="ownEditifyConfig.showWordLength ?? true "
            :allow-paste-html="ownEditifyConfig.allowPasteHtml ?? true "
            :menu="ownEditifyConfig.menu"
            :color="ownEditifyConfig.color || '#046CE7'"
            :custom-image-paste="customImagePaste"
            :style="ownEditifyConfig.customStyle"
            @blur="handleBlur"
        ></Editify>
    </div>
</template>

<script setup>
/**
 *  注意事项：
 *      ·因为本人项目的原因，涉及到的富文本编辑器功能比较浅，因为针对该编辑器只是封装了对应图片的自定义粘贴功能，若有需求亦可留言作者，后续会研究加上定制化功能
 *      ·更多功能各位大佬亦可直接去参考官方文档，附上链接https://www.ling0523.cn/vue-editify/document/29
 * 
 */

import {defineOptions,ref,computed,nextTick} from "vue";
import {Editify,insertImage,insertVideo} from "vue-editify";
// import "vue-editify/lib/style.css";

defineOptions({
    name:"QilinVueEditify"
});

/*
    数据变量定义区域
*/
// 获取编辑器元素DOM
const editifyRef=ref(null);


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    editifyConfig:{
        type:Object,
        default(){
            return {
                value:"", //html内容值
                placeholder:"请输入内容......", //占位符内容
                autofocus:true, //是否在编辑器加载完成后自动获取焦点
                disabled:false, //是否禁用编辑器
                border:true, //是否显示编辑器的边框
                autoheight:false, //编辑器是否自适应高度
                showWordLength:true, //是否显示字数统计
                allowPasteHtml:true, //是否允许粘贴携带样式的html内容
                color:"#046CE7", //编辑器主题颜色，默认#046CE7
                customStyle:"", //自定义样式
                menu:{ //菜单栏配置项
                    use:true, //是否使用菜单栏
                    tooltip:true, //是否使用工具提示
                    fullScreen:{ //是否显示可全屏按钮配置
                        show:true, //是否显示按钮
                        rightBorder:true, //按钮是否显示在右侧边框

                    },
                },
                customImagePaste:(insertImage,file,editor)=>{}, //自定义粘贴图片事件
                customVideoPaste:(insertImage,file,editor)=>{}, //自定义粘贴视频事件
            }
        }
    },
    content:{ //回显内容
        type:String,
        default:""
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:editifyConfig","success"]);
// 组件自身的配置项
const ownEditifyConfig=computed({
    get(){
        propsValue.editifyConfig.value=propsValue.content;
        // console.log(propsValue.content);
        // nextTick(()=>{
        //     // 初始化获取自定义显示内容
        //     propsValue.editifyConfig.value=propsValue.content;
        // });
        // console.log(propsValue.editifyConfig);
        return propsValue.editifyConfig;
    },
    set(val){
        emits("update:editifyConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 自定义粘贴图片事件监听
const customImagePaste=async (file)=>{
    // console.log(editifyRef.value);
    // console.log(file);
    ownEditifyConfig.value.customImagePaste && await ownEditifyConfig.value.customImagePaste(insertImage,file,editifyRef.value.editor);
};
// 编辑器失去焦点事件监听
const handleBlur=(value)=>{
    // console.log(value);
    emits("success",value);
};


/*
    生命周期等代码区域
*/
defineExpose({
    handleBlur
});

</script>

<style lang="scss" scoped>
.QilinVueEditify{
    width:100%;
    :deep(.editify-content){
        min-height:200px;
    }
    .fullscreen{
        background-color:#fff;
    }
}
</style>
